<!--
 作者 : 唐梓元
 日期 : 2019-7-4
 版本 : 1.0
 描述 :筛选查询所有成果，在首页和查询页面有使用
 使用 : <star :score=5></star>
 参数 :score为评星的数量
 -->

<template>
  <div class="star">
    <i class="star-item" v-for="(itemClass,index) in itemClasses" :key='index' :class="[itemClass,big]" @click="choose(index)"></i>
  </div>
</template>

<script>
  //星星的长度
  const  LENGTH=5
  //星星的状态
  const CLS_ON='on'
  const CLS_off='off'
    export default {
    data(){
      return{
        // score:''
      }
    },
    props:{
      score:{
        type:String,
      },
      big:String
    } ,
      computed:{
      itemClasses(){
        let result=[]
        //全星
        let integer=this.score
        //遍历全星
        for(let i=0;i<integer;i++){
          result.push(CLS_ON)
        }
        //补齐
        while(result.length<LENGTH){
          result.push(CLS_off)
        }
        return result
      }
    },
      methods:{
        choose(index){
          this.$emit("do_getScore",index)
        }
      }
    }
</script>

<style scoped>

  .star{
    font-size: 0;
    padding-top: 5px;
  }
  .star .star-item{
    /*cursor: pointer;*/
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 3px;
    background-repeat: no-repeat;
    background-size: 16px 16px;
  }
  .star .bigger{
    cursor: pointer;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 7px;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    position: relative;
    top: 2px;
  }
  .star .star-item:last-child{
    margin-right: 0;
  }
  /* 二种图片类型*/
  .star .on{
    background-image: url('../../assets/commonImg/xing_xuanzhong201974.png');
  }

  .star .off{
    background-image: url('../../assets/commonImg/xing_weixuanzhong201974.png');
  }
  /*.collectWrapper .star3{*/

    /*display: inline-block;*/
    /*width: 16px;*/
    /*height: 15px;*/
    /*background-size: 16px 15px;*/
    /*background-image: url('../../assets/img/wdsc.png');*/
  /*}*/
</style>
